<template>
  <div class="backgroundImg">
    <div class="icon-bar">
      <h1>【沃柜】沃必拓</h1>
      <span>图书柜后台管理系统</span>
    </div>
    <div class="login-bar">
      <h2>用户登录</h2>
      <div class="login-box">
        <!-- required 不能为空 -->
        <input type="text" required="required" v-model="user.username" />
        <label for="">用户名</label>
      </div>

      <div class="login-box">
        <input
          type="password"
          required="required"
          v-model="user.password"
          autocomplete="off"
          @keyup.enter="keyDown"
        />
        <label for="">密码</label>
      </div>
      <a class="login-buttun" @click="loginBtn"> 登录 </a>
    </div>
  </div>
</template>
  
  <script setup>
import { useRouter } from "vue-router";
import { reactive } from "vue";
import { login, getRolerApi } from "@/api/api.js";
import message from "@/util/alert.js"; 
const router = new useRouter();
const goPage = (url) => {
  router.push({ path: url });
};
const user = reactive({
  username: "admin",
  password: "123456",
});

const loginBtn = async () => {
  if (user.username == "" || user.password == "") {
    message.warning("账号或密码不能为空");
    return;
  }
  let res = await login(user);
  localStorage.setItem("Authorization", res.token);
  // let roleRes = await getRolerApi();
  // localStorage.setItem("AuthenticationCode", roleRes.data);
  message.success("登录成功");
  goPage("/");
};

const keyDown = (e) => {
  if (e.keyCode == 13 || e.keyCode == 100) {
    loginBtn();
  }
};
</script>
  
  <style lang="scss" scoped>
.backgroundImg {
  background-color: #228dbe;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.icon-bar {
  width: 400px;
  height: 64px;
  margin: 0 111px;
  margin-bottom: 40px;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.icon-bar h1 {
  height: 52px;
  line-height: 52px;
  font-size: 36px;
  color: #ffffff;
  font-family: sans-serif;
  margin-bottom: 10px;
}

.icon-bar span {
  display: inline-block;
  height: 14px;
  line-height: 14px;
  font-size: 28px;
  color: #eeede8;
  font-family: sans-serif;
  letter-spacing: 10px;
  padding-left: 5px;
}

.login-bar {
  width: 400px;
  height: 430px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 20px 60px;
  transition: background-color 0.3s;
}

.login-bar h2 {
  color: #645b5b;
  font-size: 30px;
  font-weight: 800;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
}

.login-bar .login-box {
  position: relative;
  width: 100%;
}

.login-bar .login-box input {
  outline: none;
  border: none;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 30px;
  font-size: 20px;
  color: #1e1e1e;
  border-bottom: 1px solid #999999;
  /* 透明色 */
  background-color: transparent;
}

.login-bar .login-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 20px;
  color: #999999;
  /* 取消鼠标事件 */
  pointer-events: none;
  transition: all 0.5s;
}

/* ，是元素分组，表示任意一个组都采用下面样式 */
/* +是相邻的兄弟元素选择器 */
/* focus绑定的是input 但执行的是label */
/* valid是内容合法 不使用这个，输入了内容取消点击labei的值就会变回原样*/
/* required="required"  表示不允许输入空值，空值就不合法 那么label的值就会下来 */
.login-bar .login-box input:focus + label,
.login-bar .login-box input:valid + label {
  top: -30px;
  color: #03e9f4;
  font-size: 18px;
}

.login-bar a {
  overflow: hidden;
  position: relative;
  padding: 2px 20px;
  color: #0a3a44;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
}

.login-bar a:hover {
  color: #0b2a30;
  transform: scale(1.1);
  text-decoration: none;
}
</style>